<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点信息</title>
    <link rel="shortcut icon" href="favicon.ico">
    <script src="/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="/static/js/base.js"></script>
    <link rel="stylesheet" href="/static/layui/css/layui.276.css" media="all">
    <script src="/static/layui/layui.2.7.6.js"></script>



</head>
<body>

<div class="layui-row">
    <div class="layui-bg-white" style="padding: 30px;">
        <div class="layui-row layui-col-space15">
            <button class="layui-btn layui-btn-outline layui-btn-success" type="button" id="addNode">添加顶级节点</button>
            <button class="layui-btn layui-btn-outline layui-btn-success" type="button" id="update">更新代码节点</button>
        </div>
    </div>
</div>
<div class="layui-row">
    <div class="layui-bg-white" style="padding:0 30px;">
        <div class="layui-row layui-col-space15">
            <div id="nodes" class="demo-tree demo-tree-box" style="width: 80%; padding: 40px;background-color: #fff !important;"></div>
        </div>
    </div>
</div>


<!-- 添加节点 -->
<div class="layui-card" id="node_box" style="display: none;padding: 20px;">
    <div class="layui-card-body">
        <form class="layui-form"  action="" lay-filter="add-form">
            <div class="layui-form-item">
                <label class="col-sm-3 layui-form-label">节点名称：</label>
                <div class="layui-input-block col-sm-7">
                    <input id="node_name" type="text" class="layui-input" name="node_name" required>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="col-sm-3 layui-form-label">所属节点：</label>
                <div class="layui-input-block col-sm-7">
                    <input type="text" class="layui-input" value="0" disabled name="parent_id" id="pid">
                    <input name="show_pid" type="text" class="layui-input" value="顶级节点" disabled>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="col-sm-3 layui-form-label">控制器名：</label>
                <div class="layui-input-block col-sm-7">
                    <input id="control_name" type="text" class="layui-input" name="control_name" required placeholder="全小写">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="col-sm-3 layui-form-label">方法名：</label>
                <div class="layui-input-block col-sm-7">
                    <input id="action_name" type="text" class="layui-input" name="action_name" required placeholder="全小写">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="col-sm-3 layui-form-label">排序：</label>
                <div class="layui-input-block col-sm-7">
                    <input id="sort" type="text" class="layui-input" name="sort" required placeholder="值越大越靠前">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="col-sm-3 layui-form-label">是否是菜单项：</label>
                <div class="layui-input-block col-sm-7">
                    <select class="layui-input" name="is_menu" required id="is_menu">
                        <option value="0">否</option>
                        <option value="1">是</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="col-sm-3 layui-form-label">菜单图标：</label>
                <div class="layui-input-block col-sm-7">
                    <input id="style" type="text" class="layui-input" name="style" placeholder="只有顶级节点需要">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="formAdd">立即提交</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- 添加节点 -->

<!-- 编辑节点 -->
<div class="layui-card" id="edit_box" style="display: none;padding: 20px;">
    <div class="layui-card-body">
        <form class="layui-form" action="" lay-filter="edit-form">
            <input type="hidden" name="id" id="id"/>
            <div class="layui-form-item">
                <label class="col-sm-3 layui-form-label">节点名称：</label>
                <div class="layui-input-block col-sm-7">
                    <input id="e_node_name" type="text" class="layui-input" name="node_name" required>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="col-sm-3 layui-form-label">控制器名：</label>
                <div class="layui-input-block col-sm-7">
                    <input id="e_control_name" type="text" class="layui-input" name="control_name" required placeholder="全小写">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="col-sm-3 layui-form-label">方法名：</label>
                <div class="layui-input-block col-sm-7">
                    <input id="e_action_name" type="text" class="layui-input" name="action_name" required placeholder="全小写">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="col-sm-3 layui-form-label">排序：</label>
                <div class="layui-input-block col-sm-7">
                    <input id="sort" type="text" class="layui-input" name="sort" required placeholder="值越大越靠前">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="col-sm-3 layui-form-label">是否是菜单项：</label>
                <div class="layui-input-block col-sm-7">
                    <select  name="is_menu" lay-verify="required" id="e_is_menu">
                        <option value="0">否</option>
                        <option value="1">是</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="col-sm-3 layui-form-label">菜单图标：</label>
                <div class="layui-input-block col-sm-7">
                    <input id="e_style" type="text" class="layui-input" name="style" placeholder="只有顶级节点需要">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="formEdit">立即提交</button>
                </div>
            </div>
        </form>

    </div>
</div>
<!-- 添加节点 -->


<!-- 节点操作询问层 -->
<div class="layui-card" id="ask_box" style="display: none">
    <div class="form-horizontal m-t layui-card-body">
        <div class="layui-form-item" style="text-align: center">
            <button class="layui-btn layui-btn-success" type="button" id="addsubNode">
                <i class="fa fa-plus"></i>
                添加子节点
            </button>
            <button class="layui-btn layui-btn-primary" type="button" id="editNode">
                <i class="fa fa-edit"></i>
                编辑节点
            </button>
            <button class="layui-btn layui-btn-danger" type="button" id="delNode">
                <i class="fa fa-trash-o"></i>
                删除节点
            </button>
        </div>
    </div>
</div>
<script type="text/javascript">
    var box;
    var currentNode = null;
    layui.use(['tree', 'util','layer','form'], function(){
        var form = layui.form,util=layui.util,layer=layui.layer,tree=layui.tree;
        //提交
        form.on('submit(formAdd)', function(data){

            $.ajax({
                url:'/admin/node/nodeAdd',
                data:data.field,
                async:false,
                type:'post',
                dataType:'json',
                headers:{
                    'token':localStorage.getItem('hypercmfname')+'_'+localStorage.getItem('token'),
                    'accept':'*/*'
                },
                success:function(res){
                    if(res.code==1){
                        layer.msg('操作成功',{
                            icon: 1,
                            time: 1000 //1秒关闭（如果不配置，默认是3秒）
                        },function () {
                            layer.closeAll()
                            window.location.reload()
                        })

                    }else{
                        layer.alert(res.msg,{icon:5})//1√，2×，3问号，4锁，5不开心，6开心
                    }
                },error:function(res){
                    layer.alert('请求失败',{icon:2})
                }
            })
            return false;
            return false;
        });
        form.on('submit(formEdit)', function(data){
            // console.log(JSON.stringify(data.field))
            $.ajax({
                url:'/admin/node/nodeEdit',
                data:data.field,
                async:false,
                type:'post',
                dataType:'json',
                headers:{
                    'token':localStorage.getItem('hypercmfname')+'_'+localStorage.getItem('token'),
                    'accept':'*/*'
                },
                success:function(res){
                    if(res.code==1){
                        layer.msg('操作成功',{
                            icon: 1,
                            time: 1000 //1秒关闭（如果不配置，默认是3秒）
                        },function () {
                            layer.closeAll()
                            window.location.reload()
                        })

                    }else{
                        layer.alert(res.msg,{icon:5})//1√，2×，3问号，4锁，5不开心，6开心
                    }
                },error:function(res){
                    layer.alert('请求失败',{icon:2})
                }
            })
            return false;
        });

        getTree();
        $("#update").click(function () {
            $.ajax({
                url:'/admin/node/updateRouteCache',
                async:false,
                type:'post',
                dataType:'json',
                headers:{
                    'token':localStorage.getItem('hypercmfname')+'_'+localStorage.getItem('token'),
                    'accept':'*/*'
                },
                success:function(res){
                    if(res.code==1){
                        layer.msg('操作成功',{
                            icon: 1,
                            time: 1000 //1秒关闭（如果不配置，默认是3秒）
                        },function () {
                            window.location.reload()
                        })

                    }else{
                        layer.alert(res.msg,{icon:5})//1√，2×，3问号，4锁，5不开心，6开心
                    }
                },error:function(res){
                    layer.alert('请求失败',{icon:2})
                }
            })
            return false;
        })
        $("#addNode").click(function(){
            form.val('add-form', {
                "parent_id": 0,
                "show_pid": '顶级节点',
                "control_name": '#',
                "action_name": '#',
                "sort":20,
            });
            box = layer.open({
                type: 1,
                title: '添加顶级节点',
                anim: 2,
                // skin: 'layui-layer-molv', //加上边框
                area: ['620px', '440px'], //宽高
                content: $('#node_box')
            });
        });

        $("#addsubNode").click(function(){
            layer.close(box);
            console.log(currentNode)
            form.val('add-form', {
                "parent_id": currentNode.id,
                "show_pid": currentNode.title
            });
                box = layer.open({
                    type: 1,
                    title: '添加 ' + currentNode.title + ' 的子菜单',
                    shadeClose:true,
                    // anim: 2,
                    // skin: 'layui-layer-molv', //加上边框
                    area: ['80%', '80%'], //宽高
                    content: $('#node_box')
                });
        });

        $("#editNode").click(function(){
            layer.close(box);
            form.val('edit-form', {
                "id": currentNode.id,
                "node_name": currentNode.title,
                "control_name": currentNode.control_name,
                "action_name": currentNode.action_name,
                "is_menu":currentNode.is_menu,
                "sort":currentNode.sort,
                "style": currentNode.style
            });
            box = layer.open({
                type: 1,
                title: '编辑  ' + currentNode.title + '  节点',
                shadeClose:true,
                //anim: 2,
                // skin: 'layui-layer-molv', //加上边框
                area: ['80%', '80%'], //宽高
                content: $('#edit_box')
            });
        });

        $("#delNode").click(function(){
            layer.close(box);
            if(currentNode.children.length > 0){
                layer.alert('该节点下有子节点，不可删除', {icon:2, title:'失败提示', closeBtn:0, anim:6});
                return false;
            }
            var a = Math.ceil(Math.random()*100)
            layer.prompt({title: '为了防止误操作，请输入：'+ a, formType: 2}, function(text, index){
                if(text!=a){
                    layer.msg('验证失败');
                    setTimeout(function () {
                        layer.close(index);
                    },1000)
                }else{
                    $.ajax({
                        url:'/admin/node/nodeDel',
                        data:{id:currentNode.id,status:0},
                        async:false,
                        type:'post',
                        dataType:'json',
                        headers:{
                            'token':localStorage.getItem('hypercmfname')+'_'+localStorage.getItem('token'),
                            'accept':'*/*'
                        },
                        success:function(res){
                            if(res.code==1){
                                layer.msg('操作成功',{
                                    icon: 1,
                                    time: 1000 //1秒关闭（如果不配置，默认是3秒）
                                },function () {
                                    layer.closeAll()
                                    window.location.reload()
                                })

                            }else{
                                layer.alert(res.msg,{icon:5})//1√，2×，3问号，4锁，5不开心，6开心
                            }
                        },error:function(res){
                            layer.alert('请求失败',{icon:2})
                        }
                    })
                }
            });

        });

    });

    function getTree(){
        layui.use(['tree', 'layer'], function(){
            var layer = layui.layer,tree=layui.tree;
            $.ajax({
                url:'/admin/node/index',
                async:false,
                type:'get',
                dataType:'json',
                headers:{
                    'token':localStorage.getItem('hypercmfname')+'_'+localStorage.getItem('token'),
                    'accept':'*/*'
                },
                success:function(res){
                    if(res.code==1){
                        //开启节点操作图标
                        tree.render({
                            elem: '#nodes'
                            // ,showCheckbox: true
                            ,data: res.data
                            ,id:'layTree'
                            ,shadeClose:true
                            ,dataType:'json'
                            ,headers:{
                                'token':localStorage.getItem('hypercmfname')+'_'+localStorage.getItem('token'),
                                'accept':'*/*'
                            }
                            //,edit: ['add', 'update', 'del'] //操作节点的图标
                            ,click: function(obj){
                                // layer.msg(JSON.stringify(obj.data));
                                box = layer.open({
                                    type: 1,
                                    title: '您要如何操作【'+obj.data.title+'】节点',
                                    //anim: 2,
                                    // skin: 'layui-layer-molv', //加上边框
                                    area: ['400px', '150px'], //宽高
                                    content: $('#ask_box')
                                });

                                currentNode = obj.data;
                            },operate: function(obj){
                                var type = obj.type; //得到操作类型：add、edit、del
                                var data = obj.data; //得到当前节点的数据
                                var elem = obj.elem; //得到当前节点元素

                                //Ajax 操作
                                var id = data.id; //得到节点索引
                                if(type === 'add'){ //增加节点
                                    //返回 key 值
                                    return 123;
                                } else if(type === 'update'){ //修改节点
                                    console.log(elem.find('.layui-tree-txt').html()); //得到修改后的内容
                                } else if(type === 'del'){ //删除节点

                                };
                            }
                        });
                    }else{
                        layer.alert(res.msg,{icon:5})//1√，2×，3问号，4锁，5不开心，6开心
                    }
                },error:function(res){
                    layer.alert('请求失败',{icon:2})
                }
            })
            return false;

        });
    }

</script>

</body>
</html>